<template>
    <div>
             <div style="height:100px">
                <el-row class="end" style="width:95%;margin-top:25px">
                    <el-button type="primary" size="mini" @click="saveAll">保存</el-button>
                    <el-button type="primary" plain size="mini" @click="submitAll">提交</el-button>
                </el-row>
                <div class="imgCol">
                    <div style="width:95%" ><el-divider ></el-divider></div>
                </div>
            </div>
        <el-steps :active="activeStep"  align-center>
                    <el-step title="选择培训课次"></el-step>
                    <el-step title="录入详细信息"></el-step>
        </el-steps>
        <el-row style="margin-top:20px">
            <el-alert
              :closable="false"
              center
              title="选择课次"
              type="info">
            </el-alert>
        </el-row>
        <div class="imgCol">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="margin-top:20px" >
                <el-form-item label="培训工种" prop="trainGongZhongId">
                <el-select v-model="form.trainGongZhongId">
                    <el-option
                        v-for="item in gongZhongs"
                        :key="item.professionId"
                        :label="item.professionName"
                        :value="item.professionId">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="培训名称" prop="trainNameId">
                <el-select v-model="form.trainNameId">
                    <el-option
                        v-for="item in names"
                        :key="item.trainId"
                        :label="item.trainName"
                        :value="item.trainId">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="培训课次" prop="trainClassId">
                <el-select v-model="form.trainClassId">
                    <el-option
                        v-for="item in classes"
                        :key="item.No"
                        :label="item.name"
                        :value="item.No">
                    </el-option>
                </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="imgCol">
           <button class="btnAddTrainNext pointer" @click="goToStep2">下一步</button>

        </div>
  

    </div>
</template>
<script>

export default {
    name:'addTrainStep1',
    props:[
        'selection',
    ],
    data(){
        let self = this;
        return{
            activeStep:1,
            form:{
                //培训工种
                trainGongZhongId:1,
                //培训名称
                trainNameId:1,
                //培训课次
                trainClassId:1,
                //0是保存，1是去下一步
                saveOrnext:0,
            },
            trainGongZhongId:'',
            trainNameId:'',
            trainClassId:'',
            rules:{
                trainGongZhongId:[
                    {
                         required: true,message: '请选择培训工种', trigger: 'blur'
                    }
                ],
                trainNameId:[
                    {
                         required: true,message: '请选择培训名称', trigger: 'blur'
                    }
                ],
                trainClassId:[
                    {
                         required: true,message: '请选择培训课次', trigger: 'blur'
                    }
                ]

            },
            gongZhongs:[],
            names:[
                // {
                //     id:1,
                //     name:'低压课程培训'
                // },
                // {
                //     id:2,
                //     name:'中压课程培训'
                // },
                // {
                //     id:3,
                //     name:'高压课程培训'
                // }
            ],
            classes:[
                // {
                //     id:1,
                //     name:'第一课时'
                // },
                // {
                //     id:2,
                //     name:'第二课时'
                // },
                // {
                //     id:3,
                //     name:'第四课时'
                // },
                // {
                //     id:4,
                //     name:'第五课时'
                // }
            ]
        }
    },
    watch:{
        trainGongZhongId(){
            console.log("工种idchange:");
            console.log(this.trainGongZhongId);
            this.names=[];
            this.classes=[];
            //this.form.trainNameId='';
            //this.form.trainClassId='';
            this.getNames();
        },
        trainNameId(){
            console.log("培训名idchange:");
            console.log(this.trainNameId);
            this.classes=[];
           // this.form.trainClassId='';
            this.getClasses();
        },
        form:{
            handler:function(old,newOne){
                this.trainGongZhongId=this.form.trainGongZhongId;
                this.trainNameId=this.form.trainNameId;
                this.trainClassId=this.form.trainClassId;
            },
            deep:true
        }
    },
    mounted(){
        this.getGongZhongs();

        this.form=this.selection;
        // //this.form.trainGongZhongId=1;
        // this.trainGongZhongId=this.form.trainGongZhongId;
        // //this.form.trainNameId=this.selection.trainNameId;
        // this.trainNameId=this.form.trainNameId;
        // //this.form.trainClassId=this.selection.trainClassId;
        // this.trainClassId=this.trainClassId;
        console.log("see selection:");
        console.log(this.selection);
        console.log(this.form);

        
    },
    methods:{
        add() {
          let o = amapManager.getMap();
          let marker = new AMap.Marker({
            position: [121.59996, 31.177646]
          });

          marker.setMap(o);
        },
        goToStep2(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('valid');
                    this.form.saveOrnext=1;
                    this.$emit('keepSelection',this.form);
                    // this.$emit('changeStep',false);
                } else {
                    console.log('error submit!!');
                }
            });
        },
        //获取培训工种
        getGongZhongs(){
            var URL=this.IP+'/visitor/getProfessionInformation';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.gongZhongs=response.data.data.professionInformation;
                }else{
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取培训名和id
        getNames(){
            var URL=this.IP+'/train/getTrainNameAndIdByProfessionId';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    professionId:this.form.trainGongZhongId
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.names=response.data.data;
                }else{
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取培训课次名和id
        getClasses(){
            var URL=this.IP+'/train/getTrainClassNameAndNo';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                   trainId:this.form.trainNameId
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.classes=response.data.data;
                }else{
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //保存
        saveAll(){
            this.form.saveOrnext=0;
            this.$emit('keepSelection',this.form);
        },
        //提交
        submitAll(){
            this.$message({
                message: '请将所有信息补充完整再进行提交',
                type: 'warning'
            });
        }
 
    }
}
</script>
<style>

.el-header,.el-main,.el-footer,.el-aside{
    padding: 0px;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.imgCol{
    display:flex;
    justify-content: center;
    align-items: center;
}
.btnAddTrainNext{
    width: 400px;
    height: 40px;
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    border-style: none;
    
    border-radius: 5px;
}
.pointer{
    cursor: pointer;
}
</style>